<template>
  <AppLayout>
    <div class="xtx-goods-page">
      <div class="container">
        <!-- 面包屑 -->
        <XtxBread v-if="goodsDetail">
          <XtxBreadItem path="/">首页</XtxBreadItem>
          <XtxBreadItem :path="`/category/${goodsDetail.categories[1].id}`">{{
            goodsDetail.categories[1].name
          }}</XtxBreadItem>
          <XtxBreadItem :path="`/category/${goodsDetail.categories[0].id}`">{{
            goodsDetail.categories[0].name
          }}</XtxBreadItem>
          <XtxBreadItem>{{ goodsDetail.name }}</XtxBreadItem>
        </XtxBread>
        <!-- 商品信息 -->
        <div class="goods-info">
          <!-- 左侧 -->
          <div class="media" v-if="goodsDetail">
            <GoodsImages :images="goodsDetail.mainPictures" />
            <GoodsSales />
          </div>
          <!-- 右侧 -->
          <div class="spec">
            <GoodsInfo :goods="goodsDetail" />
            <GoodsSku
              v-if="goodsDetail"
              :specs="goodsDetail?.specs"
              :skus="goodsDetail?.skus"
              :skuId="'1369155865461919746'"
              @onSpecChanged="onSpecChanged"
              @onSpecHalfChanged="goodsDetail.currentSkuId = null"
            />
            <XtxNumberBox
              :label="'数量'"
              v-model="goodsCount"
              :max="goodsDetail?.inventory"
            />
            <XtxButton
              :size="'middle'"
              :type="'primary'"
              :style="{ 'margin-top': '20px' }"
              @click="addGoodsToCart"
              >加入购物车</XtxButton
            >
          </div>
        </div>
        <!-- 商品推荐 -->
        <GoodsRelevant :goodsId="goodsDetail?.id"></GoodsRelevant>
        <!-- 商品详情 -->
        <div class="goods-footer">
          <div class="goods-article">
            <!-- 商品+评价 -->
            <GoodsTab />
            <div class="goods-tabs"></div>
            <!-- 注意事项 -->
            <div class="goods-warn">
              <GoodsWarn />
            </div>
          </div>
          <!-- 24热榜 -->
          <div class="goods-aside">
            <GoodsHot :type="1" />
            <GoodsHot :type="2" />
            <GoodsHot :type="3" />
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script>
import GoodsRelevant from "@/views/goods/components/GoodsRelevant";
import AppLayout from "@/components/AppLayout";
import { provide, ref } from "vue";
import { getGoodsDetailById } from "@/api/goods";
import { useRoute } from "vue-router";
import GoodsImages from "@/views/goods/components/GoodsImages";
import GoodsSales from "@/views/goods/components/GoodsSales";
import GoodsInfo from "@/views/goods/components/GoodsInfo";
import GoodsSku from "@/views/goods/components/GoodsSku";
import GoodsTab from "./components/GoodsTab";
import GoodsHot from "./components/GoodsHot";
import GoodsWarn from "./components/GoodsWarn";
import Message from "../../components/library/Message";
export default {
  name: "GoodsDetailPage",
  components: {
    GoodsWarn,
    GoodsHot,
    GoodsTab,
    GoodsSku,
    GoodsInfo,
    GoodsSales,
    GoodsImages,
    GoodsRelevant,
    AppLayout,
  },

  setup() {
    const { result: goodsDetail, getData, specs } = useGoods();
    getData();

    provide("goods", goodsDetail);

    // 获取商品规格
    const onSpecChanged = (data) => {
      // 视图更新选择的最新商品数据
      // 商品现价
      goodsDetail.value.price = data.price;
      // 商品原价
      goodsDetail.value.oldPrice = data.oldPrice;
      // 商品库存
      goodsDetail.value.inventory = data.inventory;
      // 商品 skuId
      goodsDetail.value.currentSkuId = data.skuId;
      // 商品规格属性文字
      goodsDetail.value.currentAttrsText = data.attrsText;
    };
    // 商品数量
    const goodsCount = ref(1);

    // 将商品加入购物车
    const addGoodsToCart = () => {
      // 1.判断用户是否选择完整的规格 如果没有选择 不能加入购物车
      if (!goodsDetail.value.currentSkuId) {
        Message({ type: "error", text: "请选择商品规格！" });
        return;
      }
      // 2.收集商品信息
      const goods = {
        // 商品id
        id: goodsDetail.value.id,
        // 商品 skuId
        skuId: goodsDetail.value.currentSkuId,
        // 商品名称
        name: goodsDetail.value.name,
        // 商品规格属性文字
        attrsText: goodsDetail.value.currentAttrsText,
        // 商品图片
        picture: goodsDetail.value.mainPictures[0],
        // 商品原价
        price: goodsDetail.value.oldPrice,
        // 商品现价
        nowPrice: goodsDetail.value.price,
        // 是否选中
        selected: true,
        // 商品库存
        stock: goodsDetail.value.inventory,
        // 用户选择的商品数量
        count: goodsCount.value,
        // 是否为有效商品
        isEffective: true,
      };
      console.log(goods);
    };

    return { goodsDetail, specs, goodsCount, onSpecChanged, addGoodsToCart };
  },
};

function useGoods() {
  const result = ref();

  const route = useRoute();

  const goodsCount = ref(1);

  const getData = () => {
    getGoodsDetailById(route.params.id).then((data) => {
      result.value = data.result;
    });
  };

  return { result, getData, goodsCount };
}
</script>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
</style>
